 <% layout('sitelayout.html') -%>
<style>
.carousel,.carousel-control{display: none;}
/*网站介绍样式*/
.img-circle {
    border-radius: 50%;
    border: 1px solid #E0E0E0;
    padding: 4px;
}

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    font-size: 30px;
    color: #f9bc0a;
}

.carousel-control.left {
    background-image: -webkit-linear-gradient(left,rgba(255, 255, 255, 0.5) 0,rgba(0,0,0,.0001) 100%);
    background-image: -o-linear-gradient(left,rgba(255, 255, 255, 0.5) 0,rgba(0,0,0,.0001) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(255, 255, 255, 0.5)),to(rgba(0,0,0,.0001)));
    background-image: linear-gradient(to right,rgba(255, 255, 255, 0.5) 0,rgba(0,0,0,.0001) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat: repeat-x;
}
.carousel-control.right {
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(255, 255, 255, 0.5) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(255, 255, 255, 0.5) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(255, 255, 255, 0.5)));
    background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(255, 255, 255, 0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat: repeat-x;
}

.pointer{cursor:pointer;}

</style>


<div ng-app="app" ng-controller="appController">
    <div id="scrollImgs" ng-hide="true">
        <div ng-repeat="o in home.rollImages"><img src="files/upload/{{o.newImg}}"></div>
    </div>
    <div id="myCarousel" class="carousel slide dotCarousel" data-ride="carousel" data-interval="4000">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" ng-repeat="o in home.rollImages" data-slide-to="{{o.index}}" ng-class="{'active':o.index==0}"></li>
        </ol>
        <div class="carousel-inner" role="listbox" style="max-height: 600px;">
            <div class="item" ng-class="{'active':o.index==0,'pointer':o.IsUrl}" ng-repeat="o in home.rollImages" ng-click="newopenUrl(o)">
                <img style='width:100%' src="files/upload/{{o.newImg}}">
                <div class="container">
                    <div class="carousel-caption" style="display:none;">
                        <h1 class=" hidden-xs">{{o.title}}</h1>
                        <p class=" hidden-xs">{{o.description}}</p>
                    </div>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <div id="Introduction">
    </div>
</div>
<script src="/js/lib/angular.js"></script>
<script src="/js/lib/imagesloaded.pkgd.min.js"></script>
<script>
    $(".is-loading").height(1 * document.documentElement.clientHeight);

    var app = angular.module("app", []);
    app.controller('appController', function ($scope, $http) {
        $scope.home = {};
        $scope.loadRollImages = function () {          
            var Jsondata = {};
            Jsondata.type = "轮播图片";
            Jsondata.pageIndex = 1;
            Jsondata.pageSize = 100;
            $http.post('/admin/getnewsListByType', Jsondata).success(function (response) {
                $scope.home.rollImages = response;
                i = 0;
                angular.forEach($scope.home.rollImages, function (o) {
                    o.index = i;
                    i++;
                })
                $scope.imgLoad();
            });
        }
        $scope.loadRollImages();


        $scope.imgLoad = function () {           
            $('#scrollImgs').imagesLoaded(function () {
                setTimeout(function () {
                    $('.page-loading').delay(0).fadeOut(1000);
                    $("#myCarousel,.carousel-control").fadeIn("slow");
                    $scope.getnewsList();
                }, 1000);
            });
        }




        $scope.newsList = [];
        var temp3 = "<div class='container'>";
        temp3 += ' <div  style="{{style}}" onclick="openUrl(\'{{url}}\')">';
        temp3 += "{{content}}";
        temp3 += "</div>";
        temp3 += "</div>"

        $scope.getnewsList = function () {
            var indexHtml = "";
            var Jsondata = {};
            Jsondata.type = "主页介绍";
            Jsondata.pageIndex = 1;
            Jsondata.pageSize = 100;

            $http.post('/admin/getnewsListByType', Jsondata).success(function (response) {
                $scope.newsList = response;
                for (var i = 1; i <= $scope.newsList.length; i++) {
                    var o = $scope.newsList[i - 1];
                    var temp = temp3;
                    var result = temp;

                    var content = o.content;
                    if (o.IsUrl != undefined && o.IsUrl) {
                        result = result.replace("{{style}}", "cursor:pointer");
                        content = "<img src='../files/upload/" + o.newImg + "'/>";
                    }
                    for (j = 0; j < 100; j++) {
                        content = content.replace("../files/upload/small/", "../files/upload/");
                    }
                    var url = "";
                    if (o.IsUrl != undefined && o.IsUrl && o.Url != "") {
                        url = o.Url;
                    } else if (o.IsUrl != undefined && o.IsUrl && (o.url == undefined || o.Url == "")) {
                        url = "newsDetail?id=" + o._id;
                    }
                    result = result.replace("{{title}}", o.title).replace("{{newImg}}", o.newImg)
					.replace("{{content}}", content)
					.replace("{{url}}", url);
                    $("#Introduction").append(result);
                }
                $(".container img").css("width", "100%").css("margin", "0px 0px").css("border", "0px solid #eee").css("border-radius", "0px");

                $("#footer").show();

            })
        }

        $scope.newopenUrl = function (o) {
            if (!o.IsUrl) return;
            if (o.Url != "") window.open(o.Url);
            else
                window.open("newsDetail?id=" + o._id);
        }
    });



    function openUrl(url) {
        if (url == null || url == undefined || url == "") return;
        window.open(url);
    }
</script>
